<template>
	<div id="schoolShowMap"></div>
</template>

<script>
	import { Login, schoolGetAll } from '@/assets/util/api.js'
	export default {
		data() {
			return {
				map_map: "", //此参数保存地图信息
				access_token: "",
				allSchoolData: "", //保存所有学校的信息数据
			};
		},
		mounted() {
			this.access_token = this.inStorage("get", "access_token")
			this.initMap();
			this.schoolGetAll();
		},
		methods: {
			initMap() {
				var self = this;
				self.map_map = new BMap.Map("schoolShowMap"); // 创建Map实例
				self.map_map.centerAndZoom(new BMap.Point(116.404, 39.915), 10); // 初始化地图,设置中心点坐标和地图级别
				self.map_map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
				self.map_map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
				self.map_local = new BMap.LocalSearch(self.map_map, {
					renderOptions: {
						map: self.map_map
					}
				});
			},
			schoolGetAll() {
				var params = {
					access_token: this.access_token,
				}
				schoolGetAll(this, params).then((res) => {
					console.log(res.data.data)
					if(res.data.state) {
						this.allSchoolData = res.data.data;
						this.funDrawPoint();
					}
				})
			},
			funDrawPoint() {
				var self = this;
				if(document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点
					var points = []; // 添加海量点数据
					console.log(self.allSchoolData.length)
					for(var i = 0; i < self.allSchoolData.length; i++) {
						var point = new BMap.Point(self.allSchoolData[i].lon, self.allSchoolData[i].lat);
						var label = new BMap.Label(self.allSchoolData[i].name + i, {
							offset: new BMap.Size(-20, -30)
						});
						label.new_text = self.allSchoolData[i];
						self.addMarker(point, label, self.allSchoolData[i]);
					}
				} else {
					alert('请在chrome、safari、IE8+以上浏览器查看本示例');
				}
			},
			// 创建标注函数
			addMarker(point, label, new_text) {
				var self = this;
				var marker = new BMap.Marker(point);
				marker.new_text = new_text;
				self.map_map.addOverlay(marker);
				marker.setLabel(label);
				marker.addEventListener("click", function(e) {
					//					var p = marker.getPosition(); //获取marker的位置
					console.log(e);
					//					console.log(marker.getLabel());
					//					alert("marker的位置是" + p.lng + "," + p.lat);
					var sContent =
						"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+e.currentTarget.new_text.name+"</h4>" + 
						"<img style='margin:8px' id='imgDemo' src='"+self.getLoacl('http')+e.currentTarget.new_text.file+"' width='139' height='104' title='天安门'/>" + 
						"<p style='margin:0;line-height:1.5;font-size:13px;'>"+"地址："+e.currentTarget.new_text.province+e.currentTarget.new_text.city+e.currentTarget.new_text.region+"</p>" +
						"<a style='float:right;margin:10px 0;' href='#/systemClockOn?state=search'>点击查看更多 >> </a>"+
						"</div>";
					self.inStorage("set","schoolItem",e.currentTarget.new_text);
					var data = "";
					if(e.currentTarget.new_text.clock_range>0){
						data = {
							lat: e.currentTarget.new_text.lat,
							lng: e.currentTarget.new_text.lon,
							wa:  e.currentTarget.new_text.clock_range,
						}
					}else{
						data = {
							lat: 0,
							lng: 0,
							wa: 0,
						}
					}
					self.inStorage("set", "overlay", JSON.stringify(data));
					self.openInfo(sContent,e);
				});
			},
			//创建信息窗口对象
			openInfo(content, e) {
				var self = this;
				var p = e.target;
				var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
				var infoWindow = new BMap.InfoWindow(content); // 创建信息窗口对象 
				self.map_map.openInfoWindow(infoWindow, point); //开启信息窗口
			}
		}
	}
</script>
<style lang="scss" scoped>
	#schoolShowMap {
		position: absolute;
		width: 100%;
		height: 1200px;
		max-height: 97%;
		left: 0;
		top: 0;
		padding-bottom: 20px;
	}
</style>